<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>购物袋</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="/static/img/apple-touch-icon.png">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/icon/favicon.ico">
    <!-- Place favicon.ico in the root directory -->


    <!-- all css here -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/elegant-font.css">
    <link rel="stylesheet" href="/static/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="/static/css/meanmenu.min.css">
    <link rel="stylesheet" href="/static/css/magnific-popup.css">
    <link rel="stylesheet" href="/static/css/animate.css">
    <link rel="stylesheet" href="/static/css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/css/animate-heading.css">
    <link rel="stylesheet" href="/static/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="/static/css/jquery-ui.css">
    <link rel="stylesheet" href="/static/css/shortcode/shortcodes.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/responsive.css">
    <script src="/static/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body class="other-page">


<!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Header Area Start -->
<header>
    <!-- Header Menu Area -->
    <div class="menu-area mt-60">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <div class="logo-area text-center text-uppercase res-logo-sm">
                        <!--								<a href="index.html"><img src="img/icon/logo.png" alt="" /></a>-->
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Header Menu Area -->

    <!-- Banner Area Start -->
    <div class="banner-area pb-90 pt-160 bg-2">
        <div class="container">
            <div class="row">
                <div class="banner-content text-center text-white">
                    <h1>Shopping bag</h1>
                    <ul>
                        <li><a href="${HOMEURL}">主页</a> <span class="arrow_carrot-right "></span></li>
                        <li>Shopping bag</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Banner Area End -->
</header>
<!-- Header Area End -->
<!-- Page Content Wraper Area Start -->
<section class="page-content-wrapper login-area ptb-100">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <form action="#">
                    <div class="table-content table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th class="product-thumbnail">图片</th>
                                <th class="product-name">产品名</th>
                                <th class="product-price">价格</th>
                                <th class="product-quantity">数量</th>
                                <th class="product-subtotal">总计</th>
                                <th class="product-remove">移除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <%for(item in items){%>
                            <tr>
                                <td class="product-thumbnail"><a href="#"><img src="${item.image}" alt=""
                                                                               style="max-width:130px;max-height:130px;"></a>
                                </td>
                                <td class="product-name"><a href="product-details.htm">${item.title}</a></td>
                                <td class="product-price"><span class="amount">￥${item.newPrice == null?item.price:item.newPrice}</span>
                                </td>
                                <td class="product-quantity"><input value="${item.num}" readonly/></td>
                                <td class="product-subtotal">￥${item.sum}</td>
                                <td class="product-remove">
                                    <button onclick="removeItem(${item.id})"><i class="fa fa-times"></i></button>
                                </td>
                            </tr>
                            <%}%>

                            <script>
                                function removeItem(id) {
                                    $.ajax({
                                        url: '${url}' + '/user/cart/remove',
                                        type: 'post',
                                        dataType: "json",
                                        data: {
                                            id: id
                                        },
                                        success: function (result) {
                                            if (result.code == 200) {
                                                window.location.href = "${url}/cart";
                                            } else {
                                                alert(result.msg)
                                            }
                                        }
                                    });
                                }
                            </script>
                            </tbody>
                        </table>
                    </div>
                    <div class="row">
                        <div class="col-md-9 col-sm-7 col-xs-12">
                            <div class="buttons-cart">
                                <input type="submit" value="刷新购物袋">
                                <a href="http://localhost:8081">继续购物</a>
                            </div>
                            <!--									<div class="coupon">-->
                            <!--										<h3><b>优惠券</b></h3>-->
                            <!--										<p>如果您有优惠券，请输入您的优惠券代码</p>-->
                            <!--										<input type="text" placeholder="优惠券代码">-->
                            <!--										<input type="submit" value="确定">-->
                            <!--									</div>-->
                        </div>
                        <div class="col-md-3 col-sm-5 col-xs-12">
                            <div class="cart_totals">
                                <h2>购物袋结算</h2>
                                <table>
                                    <tbody>
                                    <tr class="order-total">
                                        <th>总价</th>
                                        <td>
                                            <strong><span class="amount">￥${total}</span></strong>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="wc-proceed-to-checkout">
                                    <a href="${ORDERURL}/order">购买</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- Page Content Wraper Area End -->
<!-- Fotter Area Start -->
<footer>
    <!-- Footer Top Area End -->
    <div class="fotter-area dark-gray-bg ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-xs-12">
                    <div class="address-area res-mb-sm-30">
                        <a href="index.html">shopzon</a>
                        <p>Lorem ipsum dolor sit amet, consemi cteta dipisi cing elit, sed do eiusmod tempor.</p>
                        <div class="contact-social mt-40">
                            <ul>
                                <li>
                                    <a href="#" class="social_facebook "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_twitter "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_googleplus"></a>
                                </li>
                                <li>
                                    <a href="#" class="social_linkedin "></a>
                                </li>
                                <li>
                                    <a href="#" class="social_instagram "></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-12 xs-res-mrbtm">
                    <div class="footer-menu res-mb-sm-30">
                        <h4>MY ACCOUNT</h4>
                        <ul>
                            <li><a href="#">FAQs</a></li>
                            <li><a href="#">Payments</a></li>
                            <li><a href="#">Track Your Order</a></li>
                            <li><a href="#">Return Polcy</a></li>
                            <li><a href="#">Warranty</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 hidden-sm hidden-xs">
                    <div class="footer-menu">
                        <h4>SHOP GUIDE</h4>
                        <ul>
                            <li><a href="#">Hot Sale</a></li>
                            <li><a href="#">Best Sellar</a></li>
                            <li><a href="#">Suppliers</a></li>
                            <li><a href="#">Our Store</a></li>
                            <li><a href="#">Deal of The Day</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-4 col-xs-12 xs-res-mrbtm">
                    <div class="footer-menu">
                        <h4>CONTACT INFO</h4>
                        <div class="contact-details">
                            <ul>
                                <li>
                                    <span class="icon_pin"></span>
                                    <p>Lusmod tempor incididunt</p>
                                </li>
                                <li>
                                    <span class="icon_mail"></span>
                                    <p>Lusmod incidiunt wesbvu</p>
                                </li>
                                <li>
                                    <span class="icon_phone "></span>
                                    <p>(256) 987 654 321</p>
                                </li>
                                <li>
                                    <span class="icon_clock_alt"></span>
                                    <p>8.00 am-6.00 pm</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Top Area End -->
    <!-- Footer Bottom Area Start -->
    <div class="footer-bottom-area black-bg">
        <div class="container">
            <div class="row ">
                <!--						<div class="col-md-6 col-sm-6 col-xs-12">-->
                <!--							<p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://www.mycodes.net/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>-->
                <!--						</div>-->
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <img src="/static/img/icon/payment.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Bottom Area End -->
</footer>
<!-- Fotter Area End -->

<!-- all js here -->
<script src="/static/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/owl.carousel.min.js"></script>
<script src="/static/js/isotope.pkgd.min.js"></script>
<script src="/static/js/jquery.nivo.slider.js"></script>
<script src="/static/js/jquery.simpleLens.min.js"></script>
<script src="/static/js/jquery.magnific-popup.min.js"></script>
<script src="/static/js/animated-heading.js"></script>
<script src="/static/js/price-slider.js"></script>
<script src="/static/js/jquery.ajaxchimp.min.js"></script>
<script src="/static/js/jquery.countdown.js"></script>
<script src="/static/js/jquery.meanmenu.js"></script>
<script src="/static/js/plugins.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>

